<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">直播详情</block>
		</cu-custom>
		<view class="bg-white padding flex justify-end">
			<view class="text-center margin-left">
				<view class="iconfont icon-weixin1 default"></view>
				<view>公众号</view>
			</view>
			<view class="text-center margin-left-xl" @tap="goPage('/pages/shop/index')">
				<view class="iconfont icon-shouye1 default"></view>
				<view>首页</view>
			</view>
			<view class="text-center margin-left-xl" @tap="goPage('/pages/member/index')">
				<view class="iconfont icon-wode1 default"></view>
				<view>我的</view>
			</view>
		</view>
		<view class="bg-white padding" v-if="detail">
			<view class="thumb align-center">
				<image :src="detail.thumb" mode="widthFix" class="w100"></image>
			</view>
			<view class="text-lg text-bold margin-top-sm">
				{{detail.title}}
			</view>
			<view class="margin-top-sm space-between">
				<!-- <view class="text-black">主讲人：{{detail.lecturer_name}}</view> -->
				<view>
					<text v-if="detail.stream_status == 1" class="text-red">直播中</text>
					<text v-else-if="detail.type == 2" class="text-gray">{{detail.created_at}}</text>
					<text v-else class="text-red">{{detail.start_time}}开始</text>
				</view>
				<view class="text-orange">
					积分
				</view>
			</view>
		</view>
		<view class="bg-white margin-top">
			<view class="cu-bar padding-lr">
				<view class="m-title text-bold">课程介绍</view>
			</view>
			<view class="padding-lr padding-bottom" v-if="detail && detail.content">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<shareView ref="shareView"></shareView>
		<!-- #endif -->
		<Foot value=""></Foot>
		<view class="cu-bar foot tabbar">
			<button class="submit bg-yellow text-white no-border" @tap="showShare" open-type="share">分享</button>
			<button class="submit bg-orange" v-if="detail && detail.is_subscribe == 1" @tap="goDetail">观看</button>
			<button class="submit bg-red" v-else @tap="subscribe">预约</button>
		</view>

		<view class="cu-modal" :class="modalName=='subscribeModal'?'show':''">
			<view class="cu-dialog w80">
				<view class="margin">
					<image :src="CLOUDPATH+'/gsc/icon-yes.png'" mode="aspectFill" class="yesicon"></image>
					<view class="margin text-lg">订阅成功</view>
					<view class="margin">可在我的订阅里面查看订阅记录！ 是否打开直播间？</view>
				</view>
				<view class="grid col-2 btnss text-center">
					<view class="padding-sm">
						<view class="cu-btn bg-grey round lg" @tap="modalName=''">取消</view>
					</view>
					<view class="padding-sm">
						<view class="cu-btn bg-gradual-orange round lg" @tap="goDetail">打开</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import shareView from '@/components/college/shareView.vue'
	import Foot from '@/components/default/foot.vue'
	export default {
		components: {
			shareView,
			Foot,
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				id: 0,
				detail: null,
				modalName: '',
				share_id: 0,
				CLOUDPATH: this.$config.cloudPath
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.share_id) this.share_id = options.share_id
			if (!this.id) {
				this.$common.showError('参数有误', function() {
					uni.navigateBack({})
				})
				return
			}
			if (this.$common.loginAuth(true)) {
				this.$nextTick(function() {
					uni.startPullDownRefresh({})
				})
			}
		},
		onShow() {},
		methods: {
			getDetail() {
				this.$http
					.get('in_live_detail', {
						id: this.id,
						share_id: this.share_id
					})
					.then((response) => {
						let detail = response.data.data
						detail.created_at = this.$common.timeFormat(detail.created_at, 'YYYY-MM-DD')
						detail.start_time = this.$common.timeFormat(detail.start_time)
						this.detail = detail
						console.log(this.detail)
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
			subscribe() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.post('live_subscribe_create', {
						live_id: this.id,
					})
					.then((response) => {
						this.detail.is_subscribe = response.data.data.status
						if (response.data.data.status == 1) {
							this.modalName = 'subscribeModal'
							// this.$common.showSuccess('预订成功')
						} else this.$common.showSuccess('取消成功')
						uni.hideLoading()
					})
					.catch((response) => {
						console.log(response)
						uni.hideLoading()
					})
			},
			goDetail() {
				// #ifdef H5
				uni.navigateTo({
					url: "/pages/shop/live/detail?id=" + this.id
				})
				// #endif 
				
				// #ifdef MP-WEIXIN
				let url = this.$config.H5Path + "/pages/shop/live/detail?id=" + this.id + "&token=" + uni.getStorageSync('token')+"&version=2"
				this.$common.setCache('webview_url', url,10*60)
				uni.navigateTo({
					url: "/pages/site/webview"
				})
				// #endif 
			},
			showShare() {
				// #ifdef H5
				if (this.$common.loginAuth(true)) {
					this.$common.getMember().then((member) => {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
						this.$refs.shareView.showModal(this.detail, member)
					})
				}
				// #endif
			},
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/collegePackages/pages/college/live?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.title,
				imageUrl: this.detail.thumb,
				path: path
			}
		},
		onPullDownRefresh() {
			this.getDetail()
		}
	}
</script>

<style>
	.thumb {
		max-height: 400rpx;
		overflow: hidden;
		display: flex;
	}

	.yesicon {
		width: 120rpx;
		height: 120rpx;
	}

	.submit {
		border-radius: 0;
		font-size: 30rpx;
	}

	.submit::after {
		display: none;
	}
</style>
